<template>
  <div class="fenxiaoshangguanli">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;"
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/fenxiaoshangguanli' }">分销商管理</el-breadcrumb-item>
            <el-breadcrumb-item>发展分销商</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div
          style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;"
        >
          <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;" v-if="this.rate.allow_change_rate=='1' && this.rate.is_direct=='1' && this.rate.is_qfx == '0'">
            <div>
              <img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px;" />
            </div>
            <div>设置分销抽成</div>
          </div>
          <div
            style="height: 112px; background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;"
            v-if="this.rate.allow_change_rate=='1' && this.rate.is_direct=='1' && this.rate.is_qfx == '0'"
          >
            <div class="flex" style="align-items: center;">
              <el-radio-group v-model="rate.user_fee_type" style="margin-right: 20px;">
                <el-radio :label="0">佣金比例</el-radio>
                <el-radio :label="1">抽取金额</el-radio>
              </el-radio-group>
              <div v-if="rate.user_fee_type==1">
                <div>
                  <el-input
                    v-model="rate.user_fee_amount"
                    style="width: 200px; margin-right: 30px;"
                    placeholder="请输入金额"
                  ></el-input>
                </div>
              </div>
              <div v-else-if="rate.user_fee_type==0">
                <div class="percentage_positio">
                  <el-input
                    v-model="rate.user_fee_percent"
                    style="width: 200px; margin-right: 30px;"
                    placeholder="抽成比例"
                  ></el-input>
                  <div class="percentage_positio_son">%</div>
                </div>
              </div>
              <el-button round style="background:#005aff;color:white" @click="editClick">保存</el-button>
            </div>
            <div
              style="color:#949495;margin-top:10px;font-size:14px"
            >设置您分销抽成的金额，您抽成后的剩余佣金金额作为下游订单发展佣金</div>
          </div>
          <div
            class="flexc"
            style="font-size: 16px; font-weight: bold; margin-bottom: 20px;margin-top:20px"
            v-if="copyurlshow"
          >
            <div>
              <img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px;" />
            </div>
            <div>发展分销商</div>
          </div>
          <div
            class="flexbc"
            style="height: 80px; background: rgb(255, 255, 255); border-radius: 20px; padding:0 30px;margin-bottom: 30px;"
            v-if="copyurlshow"
          >
            <div class="flex" style="align-items: center;height: 100%;">
              <div
                style="color:#ACACAC;font-size:14px;width: 200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
              >{{ copyurl }}</div>
              <el-button
                @click="copy(copyurl)"
                style="margin-left: 40px;height: 30px;padding: 0 15px;"
                type="primary"
                round
              >复制邀请链接</el-button>
            </div>

            <div class="flexc">
              <div style="margin-right: 20px;">
                <el-checkbox
                  v-model="yaoqingma.distributor"
                  @change="baocun"
                  :true-label="1"
                  :false-label="0"
                >需邀请码才注册成为我的分销商</el-checkbox>
              </div>

              <div
                class="flexc"
                style="background: rgb(246, 248, 251);border: 1px solid rgb(227, 232, 241);border-radius: 20.5px; height: 41px; margin-right: 10px;"
              >
                <div style="padding: 0 20px; color: rgb(175, 179, 188); font-size: 14px;">邀请码</div>
                <div
                  style="width: 100px; font-size: 14px; color: rgb(2, 12, 29);"
                >{{yaoqingma.invite_code}}</div>
                <i
                  style="padding: 0 20px; cursor: pointer;"
                  class="el-icon-refresh-right"
                  @click="gengxinyaoqingma"
                ></i>
              </div>
              <div style="margin-top: 0.2rem;">
                <el-button type="primary" plain round @click="copy(yaoqingma.invite_code)">复制</el-button>
              </div>
            </div>
          </div>
          <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            <div>
              <img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px;" />
            </div>
            <div>分销商列表</div>
          </div>
          <div
            style="height: 112px; background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;"
          >
            <div class="flex">
              <div>
                <div style="margin-bottom: 10px;">分销商店铺名</div>
                <div>
                  <el-input
                    v-model="search.name"
                    style="width: 200px; margin-right: 30px;"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin-bottom: 10px;">联系电话</div>
                <div>
                  <el-input
                    v-model="search.mobile"
                    style="width: 200px; margin-right: 30px;"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div style="margin-right: 30px;">
                <div style="margin-bottom: 10px;">&nbsp;</div>
                <div>
                  <el-button @click="searchbtn" type="primary" round icon="el-icon-search">检索</el-button>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 20px;">
            <div class="flex tableh">
              <div class="tablehli">备注名</div>
              <div class="tablehli">分销商</div>
              <div class="tablehli">联系方式</div>
              <div class="tablehli">备注信息</div>
              <!-- <div class="tablehli">修程</div> -->
            </div>
            <div class="flex tableb" v-for="(item,index) in list" :key="index">
              <div class="tablebli">
                {{ item.notes_name }}
                <i
                  class="el-icon-edit"
                  @click="openeditname(item)"
                  style="color: rgb(0, 90, 255); margin-left: 20px;cursor: pointer;"
                ></i>
              </div>
              <div class="tablebli">{{ item.name }}</div>
              <div class="tablebli">{{ item.mobile }}</div>
              <div class="tablebli">
                {{ item.notes }}
                <i
                  class="el-icon-edit"
                  @click="openeditnote(item)"
                  style="color: rgb(0, 90, 255); margin-left: 20px;cursor: pointer;"
                ></i>
              </div>
              <!--<div class="tablebli" style="display: flex;align-items: center;">
                <el-tooltip class="item" effect="dark" :content="item.notes" placement="top">
                  <div class="t_over_text">
                    {{ item.notes }}
                  </div>
                </el-tooltip>
              <i class="el-icon-edit" @click="openeditnote(item)" style="color: rgb(0, 90, 255); margin-left: 20px;cursor: pointer;"></i></div>-->
              <!-- <div class="tablebli"><el-button @click="delbtn(item)" type="text">删除</el-button></div> -->
            </div>
          </div>
          <el-pagination
            style="text-align: right; padding: 20px;"
            background
            layout="prev,pager,next,total,jumper"
            :page-size="search.page_size"
            @current-change="pagechange"
            :total="total"
          ></el-pagination>
          <!-- <footers></footers> -->
        </div>
      </div>
    </div>

    <!-- 修改备注名 -->
    <el-dialog
      title="修改备注名"
      :visible.sync="isshowchangenotename"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-input v-model="editnotename" placeholder="请输入备注名"></el-input>
      <div style="margin-top: 20px;text-align: center;">
        <el-button @click="isshowchangenotename = false">取 消</el-button>
        <el-button type="primary" @click="editnamebtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改备注 -->
    <el-dialog
      title="修改备注"
      :visible.sync="isshowchangenotenote"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-input v-model="editnotenote" type="textarea" :rows="3" placeholder="请输入备注"></el-input>
      <div style="margin-top: 20px;text-align: center;">
        <el-button @click="isshowchangenotenote = false">取 消</el-button>
        <el-button type="primary" @click="editnotebtn">确 定</el-button>
      </div>
    </el-dialog>

    <div
      v-if="shoujiban"
      style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-bottom: 1rem;"
    >
      <mtop></mtop>
      <div style="background: #fff; padding: 0.3rem;">
        <div
          style=" background: #E4EDFF; border-radius: 0.2rem; padding:0.3rem; font-size: 14px; margin-bottom: 0.3rem;"
          v-if="copyurlshow"
        >
          <div class="flexbc" style="margin-bottom: 0.2rem;">
            <div>发展分销商</div>
          </div>

          <van-popup
            v-model="c7show"
            position="center"
            style="width: 6.5rem; padding: 0.3rem; border-radius: 0.2rem;"
          >
            <div>
              <div style="font-size: 0.3rem; margin-bottom: 0.33rem; font-weight: bold;">刷新邀请码</div>
              <div style="margin-bottom: 0.2rem;">刷新邀请码后原邀请码将失效</div>
              <div style="margin-top: 20px;text-align: center;">
                <el-button round @click="c7show = false">取 消</el-button>
                <el-button type="primary" round @click="gengxinyaoqingma">确定刷新</el-button>
              </div>
            </div>
          </van-popup>

          <div
            style="color:rgb(0, 90, 255); margin-bottom: 0.2rem; width: 100%; overflow: hidden;    text-overflow:ellipsis;    white-space: nowrap;"
            class="flexbc"
          >
            <!-- {{ copyurl }} -->
            <div
              @click="copy(copyurl)"
              class="flexcc"
              style=" background: #005aff; color: #fff; width: 2.8rem;  border-radius: 0.4rem;"
            >
              <img src="../../../static/mimg/n16.png" style="width: 0.5rem;" />复制推广链接
            </div>
            <div>
              邀请码验证
              <el-switch
                v-model="yaoqingma.distributor"
                @change="baocun"
                active-color="#005aff"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </div>
          </div>

          <div class="flexbc" style=" color: rgb(0, 90, 255); margin-bottom: 0.2rem;">
            <div class="flexc">
              <div>邀请码：</div>
              <div>{{yaoqingma.invite_code}}</div>
              <div style="color: #666; margin-left: 0.2rem;">
                刷新
                <i
                  style="padding: 0 0.1rem; cursor: pointer;"
                  class="el-icon-refresh-right"
                  @click="c7show = true"
                ></i>
              </div>
            </div>

            <div
              @click="copy(yaoqingma.invite_code)"
              class="flexc"
              style=" background: #005aff; color: #fff; padding: 0 0.2rem; border-radius: 0.4rem;"
            >
              <img src="../../../static/mimg/n16.png" style="width: 0.5rem;" />邀请码
            </div>
          </div>
        </div>
        <div class="flexbc">
          <div
            style="width: 5.5rem; padding:0 0.25rem; background: #f6f8fb; border-radius: 20px; height: 41px; border-radius: 41px; border: 1px solid #e3e8f1;"
            class="flexc"
          >
            <div
              style="background: rgb(255, 212, 212); min-width: 1.3rem; text-align: center; color: rgb(255, 99, 94); padding: 0.05rem 0.2rem; border-radius: 0.3rem;"
            >共计{{list.length}}个</div>
            <div>
              <el-input
                v-model="search.reseller_info"
                style="width: 3.1rem;"
                class="minput"
                placeholder="分销商名称"
              ></el-input>
            </div>
          </div>
          <div
            @click="searchbtn"
            class="flexcc"
            icon="el-icon-search"
            style="background: rgb(0, 90, 255); height: 41px; border-radius: 41px; padding: 0 0.3rem; color: #fff; margin-left: 0.2rem;"
          >检索</div>
        </div>
      </div>
      <div style="padding: 0.3rem;">
        <van-popup
          v-model="c6show"
          round
          position="center"
          style="width: 6.5rem; padding: 0.3rem; border-radius: 0.2rem;"
        >
          <div style="font-size: 0.35rem; margin-bottom: 0.3rem;">修改备注信息</div>
          <el-input
            v-model="editnotename"
            class="m2input"
            style="margin-bottom: 0.3rem;"
            placeholder="请输入备注名"
          ></el-input>
          <el-input v-model="editnotenote" type="textarea" :rows="3" placeholder="请输入备注"></el-input>
          <div style="margin-top: 20px;text-align: center;">
            <el-button @click="c6show = false">取 消</el-button>
            <el-button type="primary" @click="mbeizhu">确 定</el-button>
          </div>
        </van-popup>

        <!-- <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 0.2rem;">
          <div><img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px;"></div>
          <div>分销商列表</div>
        </div>
        <div style=" background: rgb(255, 255, 255); border-radius: 0.2rem; padding: 0.2rem; margin-bottom: 0.2rem;">
          <div style="margin-bottom: 0.2rem;"><el-input v-model="search.name" style="width: 100%;" placeholder="请输入分销商店铺名"></el-input></div>
          <div style="margin-bottom: 0.2rem;"><el-input v-model="search.mobile" style="width: 100%;" placeholder="请输入联系电话"></el-input></div>
          <div><el-button @click="searchbtn" type="primary" round icon="el-icon-search">检索</el-button></div>
        </div>-->

        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div
            v-for="item in list"
            :key="item.id"
            style="background: #fff; padding: 0.2rem; margin-bottom: 0.2rem; border-radius: 0.2rem;"
          >
            <div>
              <div class="flexbc">
                <div style="color: rgb(175, 179, 188);">{{item.name}}</div>
                <div class="flex">
                  <!-- <div style="color: #f00; margin-right: 0.2rem;" @click="delbtn(item)">冻结</div> -->
                  <div style="color: rgb(0, 90, 255);" @click="openm(item)">备注</div>
                </div>
              </div>

              <div style="font-size: 0.3rem; margin-top: 0.2rem;">{{ item.notes_name }}</div>
              <div style="font-size: 0.3rem; margin-top: 0.2rem;">{{ item.mobile }}</div>

              <div class="flexbc" style="margin-top: 0.2rem;">
                <div style="color: rgb(175, 179, 188);">备注信息</div>
                <div>{{ item.notes }}</div>
              </div>
            </div>
            <!-- <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>备注名</div>
                <div>{{item.notes_name}}<i class="el-icon-edit" @click="openeditname(item)" style="color: rgb(0, 90, 255); margin-left: 20px;cursor: pointer;"></i></div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>分销商</div>
                <div>{{item.name}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>联系方式</div>
                <div>{{item.mobile}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>备注信息</div>
                <div>{{ item.notes }} <i class="el-icon-edit" @click="openeditnote(item)" style="color: rgb(0, 90, 255); margin-left: 20px;cursor: pointer;"></i></div>
              </div>

              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>操作</div>
                <div style="color: rgb(0, 90, 255);" @click="delbtn(item)">删除</div>

            </div>-->
          </div>
        </van-list>
      </div>
      <div
        style="position: fixed; left: 0; bottom: 0; width: 100%; box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.05); background: rgb(255, 255, 255);"
      >
        <mfooter></mfooter>
      </div>
    </div>
  </div>
</template>

<script>
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import topandleft from "../topandleft.vue";
import mtop from "../mtop.vue";
import mfooter from "../mfooter.vue";
export default {
  name: "fenxiaoshangguanli",
  components: {
    left,
    top,
    topandleft,
    footers,
    mtop,
    mfooter
  },
  data() {
    return {
      search: {
        page: 1,
        page_size: 20,
        name: "",
        mobile: "",
        reseller_info: ""
      },
      total: 0,
      list: [],
      isshowchangenotename: false,
      editnotename: "",
      itemnotename: {},
      isshowchangenotenote: false,
      editnotenote: "",
      copyurl: "",
      copyurl2: "",
      copyurlshow: true,

      yaoqingma: "",
      shoujiban: false,
      loading: false,
      finished: false,

      c6show: false,
      c7show: false,
      rate: {}
    };
  },
  created() {
    //列表

    //获取邀请链接
    this.getsharelink();
    this.getRate();
  },
  mounted() {
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;

      // this.onLoad()
    } else {
      this.getlist();
    }
  },
  methods: {
    editClick() {
      axios
        .post("/agent/reseller/rate/update", {
          user_fee_percent: this.rate.user_fee_percent,
          user_fee_amount:Number(this.rate.user_fee_amount) ,
          user_fee_type: this.rate.user_fee_type
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('修改成功')
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    getRate() {
      axios.get("/agent/reseller/rate/get").then(response => {
        if (response.data.msg.code == 0) {
          this.rate = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    mbeizhu: function() {
      axios
        .post("/agent/reseller/notes-name/set", {
          user_id: this.itemnotename.id,
          notes_name: this.editnotename
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.getlist();
            axios
              .post("/agent/reseller/notes/set", {
                user_id: this.itemnotename.id,
                notes: this.editnotenote
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.getlist();
                } else {
                  this.$message.error(response.data.msg.info);
                }
              });
          } else {
            this.$message.error(response.data.msg.info);
          }
        });

      this.c6show = false;
    },
    openm: function(item) {
      this.editnotename = item.notes_name;
      this.editnotenote = item.notes;
      this.itemnotename = item;
      this.c6show = true;
    },
    onLoad() {
      axios
        .get("/agent/reseller/list", { params: this.search })
        .then(response => {
          if (response.data.msg.code == 0) {
            if (response.data.data.data.length > 0) {
              response.data.data.data.forEach(item => {
                this.list.push(item);
              });

              if (this.list.length >= response.data.data.total) {
                this.finished = true;
              } else {
                this.search.page++;
                this.loading = false;
              }
            } else {
              this.finished = true;
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    getyqm: function() {
      axios.get("/agent/reseller/system/config/get").then(response => {
        if (response.data.msg.code == 0) {
          this.yaoqingma = response.data.data;

          if (this.yaoqingma.distributor) {
            this.copyurl = this.copyurl + "&true";
          } else {
            this.copyurl = this.copyurl2;
          }
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    baocun: function() {
      axios
        .post("/agent/reseller/system/config/set", this.yaoqingma)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("设置成功");
            this.getyqm();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    gengxinyaoqingma: function() {
      axios.post("/agent/reseller/inv/update").then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("设置成功");
          this.getyqm();
          this.c7show = false;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },

    //列表
    getlist() {
      axios
        .get("/agent/reseller/list", { params: this.search })
        .then(response => {
          if (response.data.msg.code == 0) {
            console.log("列表");
            console.log(response.data.data);
            this.list = response.data.data.data;
            this.total = response.data.data.total;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    //分页
    pagechange(val) {
      console.log(val);
      this.search.page = val;
      //列表
      this.getlist();
    },
    //搜索
    searchbtn() {
      this.search.page = 1;
      if (window.screen.width < 1080) {
        this.list = [];
        this.loading = false;
        this.finished = false;
      } else {
        this.getlist();
      }
    },
    //删除
    delbtn(item) {
      this.$confirm("是否确认冻结?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .post("/agent/agent/delete", {
              user_id: item.id,
              status: -10
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!"
                });
                this.getlist();
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //打开修改备注名
    openeditname(item) {
      this.isshowchangenotename = true;
      this.editnotename = item.notes_name;
      this.itemnotename = item;
    },
    //提交修改备注名
    editnamebtn() {
      axios
        .post("/agent/reseller/notes-name/set", {
          user_id: this.itemnotename.id,
          notes_name: this.editnotename
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.isshowchangenotename = false;
            this.getlist();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    //打开修改备注
    openeditnote(item) {
      this.isshowchangenotenote = true;
      this.editnotenote = item.notes;
      this.itemnotename = item;
    },
    //提交修改备注
    editnotebtn() {
      axios
        .post("/agent/reseller/notes/set", {
          user_id: this.itemnotename.id,
          notes: this.editnotenote
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.isshowchangenotenote = false;
            this.getlist();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    //复制功能
    copy: function(t) {
      console.log(t);
      t = t.toString();
      var that = this;
      this.$copyText(t).then(res => {
        that.$message.success("复制成功");
      });
    },
    //获取邀请链接
    getsharelink() {
      //获取当前链接

      axios.get("/agent/reseller/check-code").then(response => {
        if (response.data.msg.code == 0) {
          if (!response.data.data) {
            this.copyurlshow = false;
          }
          console.log("当前链接");
          console.log(response.data.data);

          this.copyurl =
            window.origin +
            "/web/login?" +
            encodeURIComponent(response.data.data);
          this.copyurl2 =
            window.origin +
            "/web/login?" +
            encodeURIComponent(response.data.data);

          this.getyqm();
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    }
  }
};
</script>


<style scoped lang="less">
.t_over_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
}
/deep/ .minput .el-input__inner {
  border: 0 !important;
  background: transparent !important;
}
/deep/ .m2input .el-input__inner {
  background: transparent !important;
}
.percentage_positio {
  position: relative;
}
.percentage_positio_son {
  color: #afb3bc;
  position: absolute;
  right: 40px;
  top: 9px;
}
</style>
